
<!DOCTYPE html  [
    <!ENTITY nbsp "&#160;">]>
    <ui:composition template="/layout_dashboard.xhtml"
                    xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    xmlns:p="http://primefaces.org/ui">
        <f:metadata>
            <f:viewParam name="courseid" value="#{studentCourseController.courseIdPassed}"/>
        </f:metadata>
        <ui:param name="onload" value="#{studentCourseController.fullCourse()}"/>
        <ui:define name="TopBar">
            <ul>
                <li><a href="../home.xhtml">Homepage</a></li>
                <li  class="current_page_item"><a href="">Course Page</a></li>
                <li><a href="../dashboard/dashboarduser.xhtml">Dashboard</a></li>


            </ul>

        </ui:define>
        <ui:define name="Menu">
            <p:panel header="#{loginController.account.username}">
                <h:outputText  value="Name: "/>
                <h:outputText value="#{loginController.userdata.name}"  />
                <br/>
                <h:outputText  value="Email:"/>
                <h:outputText  value=" #{loginController.userdata.EMail}"  />
                <br/>
                <br/>
                <div style="text-align: center">
                    <p:commandButton action="#{loginController.logout()}" value="Logout"/>
                </div>
            </p:panel>
        </ui:define>
        <ui:define name="Content">
            <p:tabView id="tabView" orientation="top" effect="fade" effectDuration="normal" activeIndex="#{studentCourseController.currentIndex}" >
                <!--
                        orientation = "top", "bottom", "right", "left"
                        effect = "fade", "slide", "blind", "clip", "drop", "explode", "fold", "puff", "scale"
                -->
                <p:tab title="Home" disabled="false">
                    <h:panelGrid columns="3" cellpadding="20">
                        <p:graphicImage value="/resources/ContentFile/#{studentCourseController.course.photo}" width="200" height="150"/>
                        <p:panelGrid id="Info" columns="2" >
                            <h:outputText value="Nom du cours" />
                            <h:outputText value="#{studentCourseController.course.courseName}" />
                            <h:outputText value="Date de lancement" />
                            <h:outputText value="#{studentCourseController.course.launchDate}" />
                            <h:outputText value="Statut" />
                            <h:outputText value="#{studentCourseController.course.status}" />
                        </p:panelGrid>
                        <p:dataList id="deadlines" value="#{studentCourseController.listExamByCourse}" var="exam" type="definition">
                            <p:panelGrid columns="2">
                                <h:form>
                                    <p:commandLink value="Exam: #{exam.idTopic.nameTopic}" action="#{studentCourseController.setExamPassed(exam)}" update=":tabView"/>
                                </h:form>
                                <h:outputText value="Deadline: #{exam.deadline}"/>
                            </p:panelGrid>
                        </p:dataList>
                    </h:panelGrid>
                </p:tab>

                <p:tab title="Courseware" disabled="false" >
                    <h:form>
                        <h:panelGrid columns="3" cellpadding="10">


                            <p:selectOneListbox id="topiclist" value="#{studentCourseController.selectedTopic}" >
                                <f:selectItems value="#{studentCourseController.listTopicByCourse}" />
                                <p:ajax onstart="#{studentCourseController.resetSelected()}" update="topiclist,chapterlist,contentlist"/>
                            </p:selectOneListbox>

                            <p:selectOneListbox id="chapterlist" value="#{studentCourseController.selectedChapter}" >
                                <f:selectItems value="#{studentCourseController.chapterByTopic(studentCourseController.selectedTopic)}"/>
                                <p:ajax update="contentlist"/>
                            </p:selectOneListbox>

                            <p:selectOneListbox id="contentlist" value="#{studentCourseController.selectedContent}">
                                <f:selectItems value="#{studentCourseController.contentByChapter(studentCourseController.selectedChapter)}"/>
                                <p:ajax update="FileDialog" oncomplete="fileDialog.show();" />

                            </p:selectOneListbox>



                            <p:dialog id="FileDialog" header="#{studentCourseController.selectedContent.contentName}" showEffect="fade" hideEffect="fade" modal="true"
                                      widgetVar="fileDialog" style="text-align: center;"  >
                                <p:ajax event="close" update="FileDialog" />
                                <p:outputPanel style="text-align:center; width:1000px; height:500px; " layout="block">
                                    <p:media value="/resources/ContentFile/#{studentCourseController.selectedContent.contentUrl}" width="100%" height="100%">
                                        <f:param name="autoPlay" value="false" />
                                    </p:media>

                                </p:outputPanel>

                            </p:dialog>



                        </h:panelGrid>
                    </h:form>
                </p:tab>


                <p:tab title="Syllabus" disabled="false">
                    <h:form>

                        <p:dataTable id="salesTable" var="itopic" value="#{studentCourseController.listTopicByCourse}">

                            <p:columnGroup type="header">
                                <p:row>
                                    <p:column rowspan="2" headerText="Topic" />
                                    <p:column rowspan="2" headerText="Chapter" />
                                    <p:column rowspan="2" headerText="Start Date" />
                                    <p:column rowspan="2" headerText="Due Date" />
                                </p:row>


                            </p:columnGroup>

                            <p:column>
                                #{itopic.nameTopic}
                            </p:column>

                            <p:column >

                                <div class="datalist-noborder">
                                    <p:dataList value="#{studentCourseController.chapterByTopic(itopic)}" var="ichapiter" >
                                        #{ichapiter.chapterName}
                                    </p:dataList>
                                </div>

                            </p:column>

                            <p:column>
#{studentCourseController.updateDate(itopic.idCourse.launchDate , itopic.weekNumber )}
                            </p:column>

                            <p:column>
                                #{itopic.examList.get(0).deadline}
                            </p:column>
                        </p:dataTable>

                    </h:form>
                </p:tab>


                <p:tab title="Exams" disabled="#{studentCourseController.entry}">

                    <h:form id="examPass">

                        <ui:repeat value="#{studentCourseController.responseByExam(studentCourseController.selectedExam)}" var="list" varStatus="current" id="repeat">
                            <h:outputText value="#{studentCourseController.questionByExam(studentCourseController.selectedExam)[current.index]}"/>
                            <h:selectOneRadio value="#{studentCourseController.resultArray[current.index]}" id="chooseOne" layout="pageDirection" disabled="#{studentCourseController.passed}" >
                                <f:selectItems value="#{list}" />
                            </h:selectOneRadio>
                            <h:panelGroup id="outText" rendered="#{studentCourseController.bool}">
                                <h:outputText value="Correct " rendered="#{studentCourseController.resultArray[current.index] eq studentCourseController.reponseArray[current.index]}"/>
                                <p:graphicImage  width="25" height="20"  library="ContentFile" name="correct.png" rendered="#{studentCourseController.resultArray[current.index] eq studentCourseController.reponseArray[current.index]}"/>
                                <h:outputText value="Incorrect " rendered="#{studentCourseController.resultArray[current.index] ne studentCourseController.reponseArray[current.index]}"/>
                                <p:graphicImage  width="25" height="20"  library="ContentFile" name="incorrect.png" rendered="#{studentCourseController.resultArray[current.index] ne studentCourseController.reponseArray[current.index]}"/>

                            </h:panelGroup>
                            <br/>
                        </ui:repeat>

                        <p:commandButton value="submit" action="#{studentCourseController.submit()}" update="@(form)"/>
                    </h:form>
                </p:tab>

            </p:tabView>


            <style type="text/css">
                .datalist-noborder .ui-widget-content {
                    border: none;
                    background-color: transparent;
                }
            </style>

        </ui:define>


    </ui:composition>
